<template>
	<div class="onex-icon" :style="{'--primary-color':props.color}">
		<Icon v-if="props.icon" :icon="props.icon" :color="props.color" :width="props.size + 'px'" :height="props.size+ 'px'" v-bind="bindAttrs" />
		<img v-else :src="props.svg" :width="props.size + 'px'" :height="props.size+ 'px'">
	</div>
</template>

<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { Icon } from '@iconify/vue';

const attrs = useAttrs();

const props = defineProps({
	svg:{
		type:String,
		default:''
	},
	icon:{
		type:String,
		default:''
	},
	size:{
		type:String,
		default:'40'
	},
	color:{
		type:String,
		default:'#FFFFFF'
	}
});

const bindAttrs = computed(() => ({
  class: attrs.class || '',
  style: attrs.style || ''
}));
</script>

<style scoped>
	.onex-icon {
		display: flex;
		flex-direction: column;
		justify-content:center;
		align-items:center;
		cursor: pointer;
	}
	.onex-icon:active {
		animation: anim-active 0.5s ease-in-out backwards;
	}
</style>
<style>
	@-webkit-keyframes anim-active {
		from {
			opacity: .4;
			transition: .5s;
		}
		to {
			box-shadow: 0 0 0 6px var(--primary-color);
			opacity: 0;
		}
	}
</style>